﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"
          th:href="@{/static/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"
          th:href="@{/static/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"
          th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"
          th:href="@{/static/h-ui.admin/skin/default/skin.css}"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"
          th:href="@{/static/h-ui.admin/css/style.css}"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>歌曲列表</title>
    <!--<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">-->
</head>
<body >
<!--<div class="pos-a" style="width:200px;left:0;top:0; bottom:0; height:100%; border-right:1px solid #e5e5e5; background-color:#f5f5f5; overflow:auto;">-->
<!--<ul id="treeDemo" class="ztree"></ul>-->
<!--</div>-->

<div >
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 歌曲管理 <span
            class="c-gray en">&gt;</span> 歌曲列表 <a class="btn btn-success radius r"
                                                  style="line-height:1.6em;margin-top:3px"
                                                  href="javascript:location.replace(location.href);" title="刷新"><i
            class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div class="page-container">
        <!--<div class="text-c"> 日期范围：-->
        <!--<input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin" class="input-text Wdate" style="width:120px;">-->
        <!-- - -->
        <!--<input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })" id="logmax" class="input-text Wdate" style="width:120px;">-->
        <form action="/song/search">
            <input type="text" name="searchName" id="searchName" placeholder=" 歌曲名称" style="width:250px" class="input-text">
            <input type="text" name="searchNickName" id="searchByUser" placeholder=" 创建人" style="width:250px" class="input-text">
            <input type="hidden" name="cid" id="cid" value="12" style="width:250px" class="input-text">
            <button name="" id="searchBtn" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜歌曲</button>
            <span class="label label-danger radius" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></span>
        </form>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l">
                <!--<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>-->
                <!--<a class="btn btn-primary radius" onclick="product_add('添加产品','product-add.html')" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加产品</a>-->
            </span>
        <span class="r">共有数据：<strong th:text="${count}">54</strong> 条</span></div>
    <div class="mt-20">
        <table class="table table-border table-bordered table-bg table-hover table-sort">
            <thead>
            <tr class="text-c">
                <th width="40"><input name="" type="checkbox" value=""></th>
                <th width="40">ID</th>
                <th width="40">风格</th>
                <th width="40">状态</th>
                <th width="60">封面</th>
                <th width="60">歌名</th>
                <th>描述</th>
                <th width="60">创建人</th>
                <th width="100">创建时间</th>
                <!--<th width="60">播放量</th>-->
                <!--<th width="60">收藏量</th>-->
                <th width="100">驳回原因</th>
                <th width="100">审核时间</th>
                <th width="60">审核状态</th>
                <th width="40">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="text-c va-m" th:each="music:${musics}">
                <td><input name="" type="checkbox" value="" th:value="*{musicId}"></td>
                <td th:text="${musicStat.count}">001</td>
                <td th:text="${music.style}"></td>
                <td th:text="${music.power}"></td>
                <td>
                    <!--<a onClick="product_show('哥本哈根橡木地板','product-show.html','10001')" href="javascript:;">-->
                    <img width="60" class="product-thumb" src="temp/product/Thumb/6204.jpg" th:src="${music.img}">
                    <!--</a>-->
                </td>
                <td th:text="${music.musicName}"></td>
                <!--<td class="text-l"><a style="text-decoration:none" onClick="product_show('哥本哈根橡木地板','product-show.html','10001')" href="javascript:;"><img title="国内品牌" src="static/h-ui.admin/images/cn.gif"> <b class="text-success">圣象</b> 哥本哈根橡木地板KS8373</a></td>-->
                <!--<td class="text-l">原木的外在,实木条形结构,色泽花纹自然,写意;款式设计吸取实木地板的天然去雕饰之美,在视觉上给人带来深邃联想.多款产品适合搭配不同的风格的室内装饰;功能流露出尊贵典雅的大气韵味。</td>-->
                <!--<td><span class="price">356.0</span> 元/平米</td>-->
                <td th:text="${music.description}"></td>
                <td th:text="${music.nickname}"></td>
                <td th:text="${music.createtime}"></td>
                <!--<td th:text="${music.playbackVolume}"></td>-->
                <!--<td th:text="${music.collectionVolume}"></td>-->
                <td th:text="${music.reason}"></td>
                <td th:text="${music.auditTime}"></td>
                <td class="td-status">

                    <span class="label label-danger radius" th:text="${music.shenhestate}"
                          th:if="${#strings.equals('审核未通过',music.shenhestate)}">已发布</span>
                </td>
                <td class="td-manage" th:id="${music.musicId}">
                    <a style="text-decoration:none"  onClick="product_shenhe(this)" href="javascript:;" title="审核"><i
                            class="Hui-iconfont">&#xe6de;</i></a>
                    <!--<a style="text-decoration:none" class="ml-5" onClick="product_edit('产品编辑','product-add.html','10001')" href="javascript:;" title="编辑">-->
                    <!--<i class="Hui-iconfont">&#xe6df;</i>-->
                    <!--</a> -->
                    <!--<a style="text-decoration:none" class="ml-5" onClick="product_del(this,'10001')" href="javascript:;"-->
                       <!--title="删除">-->
                        <!--<i class="Hui-iconfont">&#xe6e2;</i>-->
                    <!--</a>-->
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"
        th:src="@{/lib/jquery/1.9.1/jquery.min.js}"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js" th:src="@{/static/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"
        th:src="@{/static/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<!--<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"
        th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"
        th:src="@{/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js" th:src="@{/lib/laypage/1.2/laypage.js}"></script>
<script type="text/javascript">
    // var setting = {
    // 	view: {
    // 		dblClickExpand: false,
    // 		showLine: false,
    // 		selectedMulti: false
    // 	},
    // 	data: {
    // 		simpleData: {
    // 			enable:true,
    // 			idKey: "id",
    // 			pIdKey: "pId",
    // 			rootPId: ""
    // 		}
    // 	},
    // 	callback: {
    // 		beforeClick: function(treeId, treeNode) {
    // 			var zTree = $.fn.zTree.getZTreeObj("tree");
    // 			if (treeNode.isParent) {
    // 				zTree.expandNode(treeNode);
    // 				return false;
    // 			} else {
    // 				//demoIframe.attr("src",treeNode.file + ".html");
    // 				return true;
    // 			}
    // 		}
    // 	}
    // };
    //
    // var zNodes =[
    // 	{ id:1, pId:0, name:"一级分类", open:true},
    // 	{ id:11, pId:1, name:"二级分类"},
    // 	{ id:111, pId:11, name:"三级分类"},
    // 	{ id:112, pId:11, name:"三级分类"},
    // 	{ id:113, pId:11, name:"三级分类"},
    // 	{ id:114, pId:11, name:"三级分类"},
    // 	{ id:115, pId:11, name:"三级分类"},
    // 	{ id:12, pId:1, name:"二级分类 1-2"},
    // 	{ id:121, pId:12, name:"三级分类 1-2-1"},
    // 	{ id:122, pId:12, name:"三级分类 1-2-2"},
    // ];
    //

    /*产品-审核*/
    function product_shenhe(obj) {
        var musicId = $(obj).parent().attr("id");
        layer.confirm(
            '通过审核？', {
                btn: ['是'],
                shade: false
            },
            function () {
                $.ajax({
                    type: "POST",
                    url: "/song/audit",
                    data: {
                        cid: 10,
                        musicId: musicId
                    },
                    success: function (data) {
                        // $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="product_shenhe(this)" href="javascript:;" title="审核"><i class="Hui-iconfont">&#xe6de;</i></a>');
                        $(obj).siblings("span").remove();
                        $(obj).parents("tr").find(".td-manage").prepend('<span>已更改</span>');
                        $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">审核通过</span>');
                        $(obj).remove();
                        layer.msg(data.msg, {icon: 6, time: 1000});
                    }
                });

            });
            // function () {
            //     var title="驳回原因";
            //     var url="/song/reason/"+musicId;
            //     product_add(title, url);
                // $.ajax({
                //     type: "POST",
                //     url: "/song/audit",
                //     data: {
                //         cid: 12,
                //         musicId: musicId
                //     },
                //     success: function (data) {
                //         $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="product_shenhe(this)" href="javascript:;" title="审核"><i class="Hui-iconfont">&#xe6de;</i></a>');
                //         $(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius">审核未通过</span>');
                //         $(obj).remove();
                //         layer.msg('未通过', {icon: 5, time: 1000});
                //     }
                // });
            // });
    }

    /**
     * 更改状态为审核未通过
     * */
    function change(obj){
        $(obj).siblings("span").remove();
        $(obj).parents("tr").find(".td-manage").prepend('<span>已审核</span>');
        $(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius">审核未通过</span>');
        $(obj).remove();
        layer.msg('未通过', {icon: 5, time: 1000});
    }

    // $(document).ready(function() {
    // 	var t = $("#treeDemo");
    // 	t = $.fn.zTree.init(t, setting, zNodes);
    // 	demoIframe = $("#testIframe");
    // 	demoIframe.on("load", loadReady);
    // 	var zTree = $.fn.zTree.getZTreeObj("tree");
    // 	zTree.selectNode(zTree.getNodeByParam("id",'11'));
    // });

    $('.table-sort').dataTable({
        "aaSorting": [
            [1, "asc"]
        ],//默认第几个排序
        "bStateSave": false,//状态保存
        "aoColumnDefs": [
            {"orderable": false, "aTargets": [0, 7]}// 制定列不参与排序
        ]
    });

    /*产品-添加*/
    function product_add(title, url) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }

    /*产品-查看*/
    function product_show(title, url, id) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }


    /*产品-下架*/
    function product_stop(obj, id) {
        layer.confirm('确认要下架吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_start(this,id)" href="javascript:;" title="发布"><i class="Hui-iconfont">&#xe603;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
            $(obj).remove();
            layer.msg('已下架!', {icon: 5, time: 1000});
        });
    }

    /*产品-发布*/
    function product_start(obj, id) {
        layer.confirm('确认要发布吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_stop(this,id)" href="javascript:;" title="下架"><i class="Hui-iconfont">&#xe6de;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>');
            $(obj).remove();
            layer.msg('已发布!', {icon: 6, time: 1000});
        });
    }

    /*产品-申请上线*/
    function product_shenqing(obj, id) {
        $(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">待审核</span>');
        $(obj).parents("tr").find(".td-manage").html("");
        layer.msg('已提交申请，耐心等待审核!', {icon: 1, time: 2000});
    }

    /*产品-编辑*/
    function product_edit(title, url, id) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }

    /*产品-删除*/
    function product_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: '',
                dataType: 'json',
                success: function (data) {
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                },
                error: function (data) {
                    console.log(data.msg);
                },
            });
        });
    }

</script>
</body>
</html>